<template>

  <el-container
    v-infinite-scroll="load"
    style="overflow:auto"
  >
    <el-header>
      <el-card>
        <div class="flex flex-between flex-center">
          <div class="title">产品列表</div>
          <el-input
            v-model="input"
            style="width:380px;"
            placeholder="请输入内容"
            @change="inputChange"
          >
            <el-button
              slot="append"
              type="primary"
              style="background:#015DFF;color:#fff;"
              @click="search"
            >搜索</el-button>
          </el-input>
        </div>

      </el-card>
    </el-header>
    <el-row
      :gutter="10"
      style="margin-top:30px"
    >
      <el-card
        class="card-box"
        shadow="hover"
      >
        <div class="flex flex-center  category-wrap">
          <div
            class="fontA"
            style="margin-right:22px"
          >所属类目:</div>
          <div class="flex-one flex">
            <div
              class=" fontB category"
              v-for="(v,k) in categoryList"
              :key="k"
              :class="curCategory === k ? ' active': ''"
              @click="changeNav(v,k)"
            >{{v.className}}</div>
          </div>

          <div
            class="editBtn"
            @click="editCategory"
          >
            编辑分类
          </div>
        </div>
        <el-row style="padding-bottom:15px">
          <el-col :span="12">
            <div>
              <span class="fontA"> 设置热门产品:</span>
              <span
                :class="isEdit ? 'fontB-bule' : 'fontC'"
                style="padding-left:9px;"
              > 选择产品({{times}} / 10)</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div
              class="editBtn"
              @click="edit"
            >{{isEdit ? '取消' : '编辑'}}</div>
          </el-col>
        </el-row>
        <el-row class="flex">
          <span
            class="fontA"
            style="padding-right:15px;"
          >操作功能:</span>
          <span
            type="info"
            size="small"
            :class="isEdit ? 'fontB-bule' : 'fontC'"
            style="padding-right:36px"
            @click="addCategory()"
          >移至分类</span>
          <span
            type="info"
            :class="isEdit ? 'fontB-bule' : 'fontC'"
            style="padding-right:36px"
            @click="onlineState(1)"
          >上线</span>
          <span
            type="info"
            :class="isEdit ? 'fontB-bule' : 'fontC'"
            style="padding-right:36px"
            @click="onlineState(2)"
          >下线</span>

        </el-row>

        <el-form :model="from">
          <el-form-item
            class="fontA"
            label="产品库开放设置"
          >
            <el-radio-group v-model="from.name">
              <el-radio label="开放全部内容"></el-radio>
              <el-radio label="仅对接受企业咨询的用户开放全部内容"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>

      </el-card>

    </el-row>

    <el-main
      class="flex flex-center"
      style="margin-left:61px;"
    >
      <div>
        <el-card
          shadow="hover"
          class="card-item"
        >
          <div
            class="flex flex-col flex-center justify-content"
            @click="addProduct"
          >
            <el-row>
              <img
                style="width: 62px; height: 62px;margin-top:39px"
                src="../../../assets/image/add-icon.png"
              ></img>
            </el-row>
            <div style="margin-top:50px;">添加产品</div>
          </div>
        </el-card>
      </div>
      <div
        v-for="(o, v) in productList"
        :key="v"
      >
        <div></div>
        <el-card
          class="card-item"
          shadow="hover"
          :body-style="{ padding: '0px'}"
        >
          <div :class="o.onlineStatus != 1 ? 'mask-wrap' : '' ">
            <div
              class="unline"
              v-if="o.onlineStatus != 1"
            >已下线</div>
            <div
              class="choosed round"
              v-if="isEdit"
              @click="checkBoxs(o,v)"
            >
              <!-- 显示数字的模式 -->
              <!-- <div>{{o.num}}</div> -->
              <div
                class="round-bule"
                v-if="o.checked"
              ></div>
            </div>
            <img
              :src="o.pdfHomePage"
              class="image"
              @click="editItem(o)"
            >
            <div
              class="card-footer"
              style="padding: 14px;"
            >
              <span class="fontA-bold">{{o.productTitle}}</span>
              <div class="bottom clearfix">
                <time class="product-name">{{o.productName}}</time>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import {
  getProductCategory,
  getProductList,
  getCategoryList,
  changeCategory,
  updateProduct
} from '@/api/product'
export default {
  name: 'ProductList',
  methods: {
    handleClick(row) {
      console.log(row)
    }
  },

  data() {
    return {
      curCategory: 0,
      from: {
        name: '',
        region: '',
        checked: true
      },
      isEdit: false, // 是否编辑中
      input: null,
      productList: [],
      categoryList: [],
      count: 0,
      times: 0,
      curList: [] // 当前选择的列表
    }
  },
  created() {
    this.initData()
  },

  methods: {
    // 选择框
    checkBoxs(o, index) {
      let checkNum = 0
      this.productList.map(item => {
        if (item.checked) checkNum++
      })
      if (!o.checked) {
        // 点击勾选
        o.num = checkNum + 1
        this.productList[index].checked = true
        // console.log(this.productList, this.checkNum)
        this.times++
      } else {
        // 点击取消
        this.productList[index].checked = false
        this.times--
        this.productList.map((item, indexs) => {
          if (item.num && item.num > this.productList[index].num) item.num--
        })
        delete this.productList[index].num
      }

      this.$forceUpdate('ProductList')
    },
    initData() {
      // 获取分类
      getCategoryList({ pageNo: 1, pageSize: 10 }).then(res => {
        this.categoryList = res.data.datas
      })

      // 获取列表
      getProductList({ pageNo: 1, pageSize: 10 }).then(res => {
        this.productList = res.data.datas
        this.productList.map(item => {
          item.checked = false
        })
      })
    },
    // 编辑分类
    editCategory() {
      this.$router.push('/product/index')
    },

    // 获取搜索内容
    inputChange(e) {
      console.log(e)
      this.search(e)
    },
    // 搜索
    search(keyword) {
      console.log('keyword', keyword)
      getProductList({ pageNo: 1, pageSize: 10, className: keyword })
        .then(res => {
          this.productList = res.data.datas
          this.productList.map(item => {
            item.checked = false
          })
          this.$message({
            type: 'success',
            message: '搜索完成'
          })
        })
        .catch(err => {
          this.$message.error('失败')
        })
    },
    // 加载分页
    load() {
      this.count += 2
    },
    // 编辑产品
    editItem(item) {
      this.$router.push({
        path: `/product/addSetting`, // 只是把query改了，其他都没变
        query: {
          id: item.productId
        }
      })
    },
    //编辑操作
    edit() {
      this.isEdit = !this.isEdit
    },
    // 切换分类
    changeNav(val, index) {
      this.curCategory = index
      console.log(val)
      changeCategory({ productClassId: val.productClassId }).then(res => {
        this.productList = res.data
      })
    },
    // 提交表单
    onSubmit(e) {
      console.log('submit!', e)
    },
    // 添加产品
    addProduct() {
      this.$router.push('/product/add')
    },
    // 线上线下状态管理
    onlineState(type) {
      if(isEdit) return
      // type:  1.上线  2.下线
      let idList = []
      if (type == 1) {
        this.productList.map(item => {
          if (item.checked === true) {
            item.onlineStatus = 1
            let obj = {
              productId: item.productId,
              onlineStatus: item.onlineStatus
            }
            idList.push(obj)
          }
        })
      } else {
        this.productList.map(item => {
          if (item.checked === true) {
            item.onlineStatus = 0
            let obj = {
              productId: item.productId,
              onlineStatus: item.onlineStatus
            }
            idList.push(obj)
          }
        })
      }
      this.updateProductItem(idList)
    },
    // 更新产品    (参数:Array , [{productId:'',需要修改的字段}])
    updateProductItem(data) {
      updateProduct(data).then(res => {})
      this.$message('修改成功')
    },
    // 删除提示框
    handleDelete() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleClick() {},
    // 添加分类输入框
    addCategory() {
      let idList = []
      this.curList.map(item => {
        let obj = {
          productId: item.productId
        }
        idList.push(obj)
        return (item.onlineStatus = 0)
      })
      // 获取要变更的分类ID
      const categoryId = 1
      idList.map(item => {
        return (item.productClassId = categoryId)
      })
      this.updateProductItem(idList)
    }
  }
}
</script>
<style scoped>
.el-header {
  padding: 0;
}
.el-form-item {
  margin: 0;
}
.card-box {
  margin: 20px 30px;
}

.category-wrap {
  border-bottom: 1px dashed #e9e9e9;
  padding-bottom: 25px;
  margin-bottom: 24px;
}
.active {
  background: #015dff;
  border-radius: 4px;
  padding: 2px 8px;
  color: #fff !important;
  margin-top: -2px;
}
.round {
  width: 18px;
  text-align: center;
  /* line-height: 18px; */
  height: 18px;
  background: #ffffff;
  border: 1px solid rgba(1, 93, 255, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* color: red; */
}
.round-bule {
  width: 12px;
  height: 12px;
  background: rgba(1, 93, 255, 1);
  border-radius: 50%;
}

.card-item {
  position: relative;
  width: 180px;
  height: 252px;
  background-color: #fff;
  border-radius: 12px;
  margin-right: 36px;
  margin-bottom: 36px;
}
.editBtn {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #015dff;
  text-align: end;
}

.flex {
  flex-wrap: wrap;
}
.image {
  position: relative;
  width: 180px;
  height: 180px;
  /* z-index: 10; */
}
.category {
  margin-right: 40px;
}

.choosed {
  position: absolute;
  right: 15px;
  top: 5px;
  z-index: 12;
  opacity: 1 !important;
  
}
.mask-wrap {
  /* background-color: rgb(0, 0, 0); */
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.unline {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 1;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}
.product-name{
  font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #444444;
}

</style>
